<template>
	<div>
		<Upload 
	    :action="uploadUrl" 
	    name="pic" 
	    accept="image/*" 
	    :data="updata" 
	    :format="['png','jpeg','jpg']" 
	    :max-size="2048" :on-progress="onProgress" 
	    :show-upload-list="false" 
	    :on-success="onSuccess" 
	    :on-error="onError">
	        <Button icon="ios-cloud-upload-outline">本地上传</Button>
	    </Upload>
	    <IProgress v-show="percent>0" :percent="percent" :stroke-width="10" hide-info status="active"></IProgress>
	</div>
</template>
<script>
	import {Progress,Upload,Button} from 'view-design';

    export default{
		components:{
            Upload,
            Button,
            'IProgress' :Progress,
        },
        props :{
        	//上传地址
        	uploadUrl :{
        		type: String,
        		required : true,
        	},
        	//上传回调
        	callback:{
                type: Function,
                required : true,
            },
        },
        data(){
        	return {
                updata : {
                    _token : window.document.getElementsByTagName('meta')['csrf-token'].getAttribute('content'),
                    fileArea : 'wechats',
                },
                percent : 0,
                upArea: false,
        	}
        },
        methods :{
            //上传进度
            onProgress(event, file, fileList){
                this.percent = event.percent;
            },
            //图片上传成功
            onSuccess(response, file, fileList){
                if(response.code!=0){
                    this.$Message.error(response.msg);return false;
                }
                this.percent = 0;
                this.callback();
            },
            //图片上传失败
            onError(error, file, fileList){
                this.$Message.error('上传失败,请重新上传');
            },
        },
	}
</script>